<template>
  <div id='app'>
    <header-bar :select-type="selectType"></header-bar>
    <div class = 'home' style="margin-top:80px;">
      <!-- 制作一个框架包裹slider -->
      <div style="width:100%;margin:20px auto;height:500px">
      <!-- 配置slider组件 -->
       <slider :pages="pages" :sliderinit="sliderinit" @slide='slide' @tap='onTap' @init='onInit' ref="slider">
        <!-- 设置loading,可自定义 -->
        <div slot="loading">loading...</div>

       </slider>
      </div>
      我是首页页面
    </div>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <footer-bar :title="底部页脚"></footer-bar>
  </div>
</template>
<style>

</style>
<script>
import headerBar from '../compack/Header'
import footerBar from '../compack/footer'
import slider from 'vue-concise-slider'
export default{
  data () {
    return {
      selectType: 'Home',
      // Image list
      pages: [
        {
          html: '<div class="slider1" ></div>',
          style: {
            'background': 'url(http://www.cdjzw.com/images/592262d6023ab.jpg)'
          }
        },
        {
          html: '<div class="slider2"></div>',
          style: {
            'background': 'url(http://www.cdjzw.com/images/592e2b82b055b.jpg)'
          }
        },
        {
          html: '<div class="slider3"></div>',
          style: {
            'background': 'url(http://www.cdjzw.com/images/58f8806cbef43.jpg)'
          }
        },
        {
          html: '<div class="slider4"></div>',
          style: {
            'background': 'url(http://storage.shjhome.com/attachment/hot/goods/category/images/4a4b3c1cd5b641d1aeec9698528a92cd.jpg)'
          }
        }
      ],
      // Sliding configuration [obj]
      sliderinit: {
        currentPage: 0,
        thresholdDistance: 100, // 滑动距离阈值判定
        thresholdTime: 300, // 滑动时间阈值判定
        duration: 300, // 滑动速度
        timingFunction: 'ease', // 滑动方式
        autoplay: 5000,
        loop: true,
        direction: 'horizontal',
        infinite: 1,
        slidesToScroll: 1
      }
    }
  },
  components: {
    headerBar,
    footerBar,
    slider
  },
  methods: {
    // Listener event
    slide (data) {
      console.log(data)
    },
    onTap (data) {
      console.log(data)
    },
    onInit (data) {
      console.log(data)
    }
  }
}
</script>
